<template>
	<view>
		<TopNav title="仓库信息"></TopNav>
		<view class="padding-bottom">
			<view class=" padding bg-white">
				<view class="text-sl text-bold text-blue">{{form.name || "-"}}</view>
				<view class="text-gray">
					{{form.code || "-"}}
				</view>
			</view>
			<view class="cu-bar bg-white margin-top">
				<view class="action sub-title">
					<text class="text-lg text-bold text-blue">基本信息</text>
					<text class="bg-blue"></text>
				</view>
			</view>
			<van-cell-group class="padding-lr-sm">
				<van-cell title="所属基地" :value="form.productionBaseName || '-'" />
				<van-cell title="产品数量" :value="form.productCnt || '-'" />
			</van-cell-group>
			<view class=" padding bg-white margin-top">
				<view class="text-xl text-bold text-blue">{{form.createUsername || "-"}}</view>
				<view class="text-gray">
					{{form.createTime || "-"}} 创建
				</view>
			</view>
			<van-cell-group class="margin-top" v-if="form.remarks">
				<van-cell title="备注" :value="form.remarks || '-'" />
			</van-cell-group>
			<view v-if="form.fileUrls">
				<view class="cu-bar bg-white margin-top">
					<view class="action sub-title">
						<text class="text-lg text-bold text-blue">相关照片</text>
						<text class="bg-blue"></text>
					</view>
				</view>
				<view class="padding bg-white">
					<view class="grid flex-sub padding-lr col-2 grid-square">
						<view class="bg-img" :style="'background-image: url(' + src + '); height: 120px; padding: 0'"
							v-for="(src, index) in getImages(form.fileUrls)" :key="index"></view>
					</view>
				</view>
			</view>
			<view class="cu-bar bg-white margin-top">
				<view class="action sub-title">
					<text class="text-lg text-bold text-blue">产品列表</text>
					<text class="bg-blue"></text>
				</view>
			</view>
			<view class="">
				<uni-table ref="table" border stripe emptyText="暂无更多数据" width="100%">
					<uni-tr>
						<uni-th align="center">类型</uni-th>
						<uni-th align="center">名称</uni-th>
						<uni-th align="center">库存</uni-th>
						<uni-th align="center">规格</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in productsList" :key="index">
						<uni-td align="center">{{ item.productTypeName }}</uni-td>
						<uni-td>
							<view class="name">{{ item.productName }}</view>
						</uni-td>
						<uni-td align="center">{{ item.stock }}{{item.stockUnit || ''}}</uni-td>
						<uni-td align="center">
							<text>{{item.specifications || '-'}}{{item.specificationsUnitDictName || ''}}</text>
						</uni-td>
					</uni-tr>
				</uni-table>
				<view class="bg-white padding-sm">
					<uni-pagination :page-size="productsQueryParams.pageSize" v-model="productsQueryParams.pageNum"
						:total="productsTotal" @change="getProductsList" />
				</view>
			</view>
		</view>
		<view class="bottom-tools padding flex justify-around bg-white">
			<van-button class='basis-xl' plain hairline type="info" @click="handleToEdit()">
				修改
			</van-button>
		</view>

	</view>
</template>

<script>
	import {
		detail,listProducts
	} from "@/api/work/warehouse"
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.config.baseUrl,
				productsList: [],
				productsTotal: 0,
				productsQueryParams:{
					warehouseId:undefined,
					pageNum:1,
					pageSize:10
				},
				queryParams: {
					id: undefined
				},
				form: {}
			}
		},
		onLoad(query) {
			if (query.id) {
				this.queryParams.id = query.id
				this.productsQueryParams.warehouseId = query.id
				this.getDetail()
				this.getProductsList()
			}
		},
		onUnload(){
			uni.$off('warehouseEdit',this.receiveWarehouseEdit)
		},
		methods: {
			receiveWarehouseEdit(){
				this.getDetail()
				this.getProductsList()
			},
			getProductsList() {
				listProducts(this.productsQueryParams).then(res => {
					let {
						rows,
						total
					} = res
					this.productsTotal = total
					this.productsList = rows
				})
			},
			handleToEdit() {
				uni.$on('warehouseEdit',this.receiveWarehouseEdit)
				this.$tab.navigateTo('./edit?id=' + this.form.id)
			},
			getDetail() {
				detail(this.queryParams).then(res => {
					this.form = res.data
				})
			},
			getImages(files) {
				if (!files) return
				const list = files.split(',').map(url => this.baseUrl + url);
				return list;
			},
		}
	}
</script>

<style lang="scss">
	@import "@/common/var.scss";
	page {
		@include fixed-bottom;
	}
	
</style>
<style scoped lang="scss">
	::v-deep .uni-table {
		min-width: 100% !important;
	}
</style>